<style lang="scss">
  @import "~@/styles/base";

  .page-model-timer {
    background-color: #fff;
    border-radius: rpx(10);
    overflow: hidden;
    .icon-wrap {
      padding-top: rpx(20);
      height: rpx(305);
      background-color: $main-color;
      font-size: rpx(34);
      line-height: rpx(40);
      color: #fff;
      text-align: center;
      font-weight: 600;
      .icon {
        display: block;
        width: rpx(150);
        height: rpx(150);
        margin-bottom: rpx(5);
        margin-left: auto;
        margin-right: auto;
      }
    }
    .timing-list {
      padding-left: rpx(35);
      padding-right: rpx(35);
      background-color: #fff;
      .timing {
        position: relative;
        padding-top: rpx(50);
        padding-bottom: rpx(45);
        border-bottom: rpx(1) solid #dbe5f0;
        &:last-child {
          border-bottom: none;
        }
        .time {
          font-size: rpx(40);
          color: $black;
        }
        .day-list {
          display: flex;
          align-items: center;
          margin-top: rpx(35);
          .day {
            margin-right: rpx(10);
            color: $main-color;
            font-size: rpx(24);
            line-height: rpx(60);
            width: rpx(60);
            height: rpx(60);
            text-align: center;
          }
        }
        switch {
          @include middle-center-y();
          right: 0;
        }
      }
    }
    .btn-add {
      display: flex;
      align-items: center;
      justify-content: center;
      position: fixed;
      right: rpx(42);
      bottom: rpx(42);
      width: rpx(100);
      height: rpx(100);
      line-height: rpx(100);
      background-color: $main-color;
      border-radius: 50%;
      img {
        width: rpx(40);
        height: rpx(40);
      }
    }
  }
</style>
<template>
  <div class="page">
    <div class="page-model-timer">
      <div class="icon-wrap">
        <img class="icon" src="/static/img/mode/mode_sunrise_ic.png">
        日光唤醒设置
      </div>
      <ul class="timing-list">
        <li class="timing" v-for="(data,index) in dataList" :key="index">
          <div class="time">{{data.hour}}:{{data.minute}}</div>
          <div class="day-list">
            <div class="day" v-for="(day,subIndex) in data.dayList" :key="subIndex">{{day}}</div>
          </div>
          <switch :checked="data.flag" :color="switchColor" @change="changeSunrise(data)"></switch>
        </li>
      </ul>
      <div class="btn-add" @click="toAdd"><img src="/static/img/common/add.png"></div>
    </div>
    <add ref="add" @success="addConfig"></add>
  </div>
</template>

<script>
  import add from "./componets/add";

  export default {
    data() {
      return {
        switchColor: "#5ba0ee",
        dataList: [],
        attrs: {},
        weekDays: [ "日", "一", "二", "三", "四", "五", "六" ]
      };
    },
    components: {
      add
    },
    methods: {
      changeSunrise(data) {
        data.flag = !data.flag;
        this.addConfig();
      },
      toAdd() {
        this.$refs.add.show();
      },
      addConfig(param) {
        let paramList = [];
        this.dataList.forEach(data => {
          paramList.push(data.flag ? 1 : 0);
          paramList.push(parseInt(data.hour));
          paramList.push(parseInt(data.minute));
          paramList.push(data.dayValue);
        });
        if (param) {
          paramList.length === 5 && paramList.pop();
          paramList = paramList.concat(param);
        }
        while (paramList.length < 40) {
          paramList.push(0);
        }
        const params = {
          wakesUp: paramList
        };
        Store.dispatch("updateDeviceAttrs", params);
        this.analysisData(paramList);
      },
      analysisData(bytes) {
        bytes = _.cloneDeep(bytes);
        const dataList = [];
        while (bytes.length) {
          const paramList = bytes.splice(0, 4);
          const flag = paramList.every(param => {
            return param === 0;
          });
          if (!flag) {
            let dayBytes = parseInt(paramList[ 3 ]).toString(2);
            while (dayBytes.length < 8) {
              dayBytes = "0" + dayBytes;
            }
            const dayList = [];
            dayBytes.split("").forEach((day, index) => {
              if (day == 1) {
                dayList.push(this.weekDays[ index ]);
              }
            });
            dataList.push({
              flag: paramList[ 0 ] === 1,
              hour: paramList[ 1 ] < 10 ? "0" + paramList[ 1 ] : paramList[ 1 ],
              minute: paramList[ 2 ] < 10 ? "0" + paramList[ 2 ] : paramList[ 2 ],
              dayList: dayList,
              dayValue: paramList[ 3 ]
            });
          }
        }
        this.dataList = dataList;
      }
    },
    onHide() {
    },
    async onShow() {
      if (!Store.getters.is_login) {
        await Store.dispatch("login");
      }
      this.attrs = await Store.dispatch("getCurrentAttrs");
      this.analysisData(this.attrs.wakesUp);
    }
  };
</script>
